<template>
  <div class="about">
    <h1>This is an about test page</h1>
    <div>
      <el-button @click="test">test</el-button>
      <el-button @click="loadAction('timebox','timeboxload')">遮罩</el-button>
    </div>

    <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
    <el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
    <div class="flex box" id="timebox">
      <div class="flex-w"> flex<input /> flex<input />flex<input /></div>
      <div class="flex butlist">
        <el-button @click="test">test</el-button>
        <el-button @click="test">test</el-button>
      </div>
      <div class="dd1" data-title="加载效果" id="timeboxload">
        <div class="dd2">
        </div>
        <div id="close">
        </div>

      </div>
    </div>
    <div id="chart5"></div>

    <div>
      <el-input v-model="input" placeholder="请输入内容" @input="changeInput"></el-input>
    </div>
  </div>
</template>


<script>
import $ from "jquery";
const echarts = require("echarts");
Date.prototype.Format = function (fmt) {
  let o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "H+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (let k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};
export default {
  name: "about",
  components: {},
  data() {
    return {
      value1: "",
      value2: "",
      input: "",
    };
  },

  mounted() {
    let index = localStorage.getItem("logintimeout");
    console.log("index", Number(index) + 1);
    let me = this;
    setTimeout(() => {
      me.init();
    }, 1200);
    $("#close").click(function () {
      let me = $(this);
      console.log(me);
      me.parent(".dd1").hide();
    });
  },
  methods: {
    test() {
      this.testForFn();
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    loadAction(id1, id2) {
      if (id1 && id2 && $("#" + id1).length > 0 && $("#" + id2).length == 0) {
        let style = $("#" + id1).attr("style");
        $("#" + id1).attr(
          "style",
          "position: relative;" + (style ? style : "")
        );
        let str =
          "<div class='dd1' data-title='加载效果' id='" +
          id2 +
          "' >" +
          "</div>";
        $("#" + id1).append(str);
      }
    },
    init(param) {
      let chart = echarts.init(document.getElementById("chart5"));
      let option = {
        title: {
          text: "",
          x: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 座标轴指示器，座标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: "",
          formatter: function (params) {
            let relVal = params[0].axisValueLabel;
            const getDateStr = (hideBar, dataBar) => {
              let str = "";
              str +=
                new Date(
                  new Date().getTime() + 86400000 * hideBar.value
                ).Format("yyyy-M-d") +
                " 至 " +
                new Date(
                  new Date().getTime() +
                    86400000 * (hideBar.value + dataBar.value)
                ).Format("yyyy-M-d");
              return str;
            };
            relVal +=
              "<br/>计划：" +
              getDateStr(params[0], params[1]) +
              "<br/>实际：" +
              getDateStr(params[2], params[3]);
            return relVal;
          },
        },
        legend: {
          data: ["计划", "实际"],
          x: 30,
        },
        toolbox: {
          show: true,
          feature: {
            //数据视图
            mark: true,
            dataView: { readOnly: false },
            restore: true,
            saveAsImage: true,
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "category",
          splitLine: { show: false },
          data: ["任务一", "任务二", "任务三", "任务四", "任务五", "任务六"],
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            interval: 0,
            formatter: function (value) {
              return new Date(new Date().getTime() + 86400000 * value).Format(
                "MM-dd"
              ); //86400000，一天的毫秒数
            },
          },
        },
        series: [
          {
            name: "planDate",
            type: "bar",
            stack: "plan",
            barCategoryGap: "10%",
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
              emphasis: {
                borderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
            },
            data: [0, 160, 67, 112, 148, 179], //计划的起始位置
          },
          {
            name: "计划",
            type: "bar",
            stack: "plan",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    fontSize: 14,
                  },
                  formatter: function (obj) {
                    return obj.value + "天";
                  },
                },
                color: "#c23531",
              },
            },
            data: [50, 50, 50, 50, 50, 50], //计划的数据内容
          },
          {
            name: "factDate",
            type: "bar",
            stack: "fact",
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
              emphasis: {
                borderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
            },
            data: [0, 160, 67, 112, 148, 179], //实际进度的起始位置
          },
          {
            name: "实际",
            type: "bar",
            stack: "fact",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    fontSize: 14,
                  },
                  formatter: function (obj) {
                    return obj.value + "天";
                  },
                },
                color: "#91c7ae",
              },
            },
            data: [33, 16, 60, 22, 58, 96], //实际进度行数据内容
          },
          {
            type: "bar",
            stack: "none",
            barWidth: "2",
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
              emphasis: {
                borderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
            },
            data: [0, 0, 0, 0, 0, 0],
          },
        ],
      };
      chart.setOption(option);
    },
    changeInput() {
      let str = /^([1-9]\d|[1-9])(.([1-9]\d|\d)){2,3}$/;
      console.log(str.test(this.input));
    },
    testForFn() {
      let list = [];
      for (let i = 0; i < 100000; i++) {
        list.push(i);
      }
      console.log("testForFn");
      console.time();
      // for (let item of list) {
      //   item = 0;
      // }
      list.map((item) => {
        return (item = 0);
      });
      console.timeEnd();
    },
  },
};
</script>
<style scoped>
#timebox {
  position: relative;
}
.loadingImageBox {
  width: 100px;
  height: 100px;
  /* background-color: transparent; */
  /* background-image: url(../assets/loading-image.gif); */
  background-color: antiquewhite;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dd1 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* background-image: url(../assets/loading-image.gif); */
  /* background-color:antiquewhite; */
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 4;
  /* top: 50%;
		left: 50%; */
  /* transform: translate(-50%, -50%); */
}
.dd2 {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: transparent;
  background-image: url(../assets/loading-image.gif);
  position: absolute;
  /* z-index: 4; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 4px;
  background: #333;
  transform: rotate(45deg);
}

#close::after {
  content: "";
  display: block;
  width: 20px;
  height: 4px;
  background: #333;
  transform: rotate(-90deg);
}
.box {
  width: 900px;
  height: 500px;
  background-color: antiquewhite;
  display: flex;
}
input {
  width: 220px;
}
.flex {
  display: flex;
  align-items: start;
  justify-content: flex-start;
}
.flex-w {
  display: flex;
  flex-wrap: wrap;
}
.butlist {
  min-width: 200px;
  display: flex;
  justify-content: space-between;
}
#chart5 {
  width: 100%;
  height: 400px;
}
</style>
